<!DOCTYPE html>
<html>
<head>
    <title></title>
    <link type="text/css" rel="stylesheet" href="../base/css/style.css">
    <link type="text/css" rel="stylesheet" href="Silder.css">
</head>
<body>
<div id="trigger" style=" border: 1px solid #E00000; height: 400px;width: 800px;position: absolute;top:50;left: 100px">

    <!-- <div class="ui-slider">
       <div></div>

        <a class="ui-slider-handle" href="javascript:void(0)"></a>

        <a class="ui-slider-handle" href="javascript:void(0)" style="left: 100%;"></a>

    </div>-->

</div>
<script type="text/javascript" src="../base/js/jquery-1.10.2.js"></script>
<script type="text/javascript" src="Silder.js"></script>
<script type="text/javascript">

    var silder = new SA.Silder({
        trigger: $("#trigger"),
        canvas: $("#trigger"),
        value: [0, 100],
        limit: [10, 90]
    });
</script>
</body>
</html>